import React from 'react'
import { Form, Input, Switch, Button, message, InputNumber, Radio } from 'antd'
import { PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons'
import request from '@/utils/request'
const { TextArea } = Input;

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

export default (props: any) => {

    const { close, form, specItems, setSpecItems, getList, id } = props


    const onFinish = (values: any) => {
        
        values.spec_items=specItems
        request(`/goods/spec/${id}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)
            close()
            getList()
        })
    }

    return (
        <Form
            {...layout}
            onFinish={onFinish}
            initialValues={{ enable: true }}
            form={form}
        >
            <Form.Item
                label="规格名称"
                name="title"
                required
                rules={[{ required: true, message: '请填写规格名称' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="是否启用"
                name="enable"
                valuePropName="checked"
            >
                <Switch />
            </Form.Item>
            <Form.Item
                label="排序"
                name="sort"
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="展现方式"
                name="show_mode"
            >
                <Radio.Group>
                    <Radio value={1}>文字</Radio>
                    <Radio value={2}>颜色</Radio>
                    <Radio value={3}>图片</Radio>
                </Radio.Group>
            </Form.Item>
            {
                specItems.map((item: any, inx: number) => {

                    return (
                        <Form.Item
                            label={inx == 0 ? "规格值" : " "}
                            key={inx}
                            colon={inx == 0}
                            required={inx == 0}
                        >
                            <Form.Item
                                noStyle
                            >
                                <Input type="hidden" value={item.item_id} />
                            </Form.Item>
                            <Form.Item
                                // name={["spec_items", inx, "title"]}
                                noStyle
                            >
                                <Input style={{ width: "94%" }} value={item.item_title} onChange={(e) => {
                                    let tempData = [...specItems];
                                    tempData[inx].item_title = e.target.value;
                                    setSpecItems(tempData)
                                }} />
                            </Form.Item>
                            <span style={{ width: "6%", cursor: "pointer", display: "inline-block", textAlign: "right" }}>
                                {inx == 0 ? <PlusSquareOutlined onClick={() => {
                                    if (specItems.length >= 5) {
                                        message.error('最多添加五项');
                                        return
                                    }
                                    let result: any = [...specItems];
                                    result.push({ item_id: 0, item_title: "" });
                                    setSpecItems(result)

                                }} /> : <MinusSquareOutlined onClick={() => {
                                    const result = specItems.filter((v: any, k: number) => k != inx)
                                    setSpecItems(result)
                                }} />}
                            </span>
                        </Form.Item>
                    )
                })
            }
            <Form.Item
                label="规格描述"
                name="describe"
            >
                <TextArea rows={4} />
            </Form.Item>
            <Form.Item
                wrapperCol={{ offset: 4 }}
            >
                <Button type="primary" htmlType="submit" style={{ marginRight: "8px" }}>保存</Button>
                <Button onClick={close}>取消</Button>
            </Form.Item>
        </Form>
    )
}